
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background-color: yellow;
    }
    .plane-wrapper{
        user-select: none;
        position: absolute;
        top: 50%;
        left: 315.5px;
        animation: undulate 8s linear infinite alternate;
      
    }
    .plane-out{
            animation:plane-out 1.3s ease-out forwards;
            user-select: none;
            /* animation-delay: 2s; */
    }
    @keyframes plane-out{
        0%{
            transform:scale(1) translateX(0);
        }
        30%{
            transform :scale(.8) translateX(160px);
        }
        100%{
            transform :scale(1.2) translateX(-2000px);
        }
    }
    @keyframes undulate{
       0%,100%,50%{
            transform: translate3d(0,0,0);
       }
       25%{
           transform: translate3d(-6px,-18px,0);
       }
       75%{
           transform: translate3d(6px,10px,0)
       }
    }
        @keyframes rotating{
            0%{
                transform: rotate(0)
            }
            50%{
                transform: rotate(180deg)
            }
            100%{
                transform: rotate(360deg)
            }
        }
    .plane-wrapper .propeller{
       position: absolute;
       top: 51%;
       left: 13%;
       width: 27.424%;
       height: 14.447%;
      
       /* animation-name: rotating;
       animation-duration: .2s;
       animation-timing-function: linear;
       animation-iteration-count: infinite;  */
       animation: rotating .2s linear infinite ;
       animation-direction: reverse;
   }